<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="cjw">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{margin: 0; padding: 0;}
	ul{padding:10px;}
	
	ul li{width:211px; height:309px; border: 1px solid rgba(204, 207, 208, 0.26); list-style-type:none; float:left; overflow:hidden; padding:4px; margin-left:20px; margin-top:20px;}
	ul li:hover{box-shadow: 0px 0px 10px -1px #adaba6; cursor:pointer;}
		
	ul li .div_picture{height:230px;}
	ul li .div_name {text-align:center; height:23px;}
	ul li .div_name span{font-size: 14px; font-family: sans-serif; margin-left: 2px; color:#555;}

	ul li .div_price{text-align:center; height:25px;}
	ul li .div_price span{font-family: fantasy; color: red; font-size: 22px;     line-height:21px; font-weight: bold;}

	ul li .div_button a{width:211px; height:30px; display:block; color: #fff; background:#f90; text-align:center; line-height:30px; cursor:pointer; border-radius:5px; overflow:hidden;}
	ul li .div_button a:hover{background:#ec8d00;}
	ul i{display:block; width:16px; height:16px;}
	
	.goods_set{position:absolute; display:none; width:203px; height:24px; background:#ddd; padding:4px;}
	.goods_set label{float:left; height:24px;}
	.goods_set label:nth-child(1){width:24px;}
	.goods_set label:nth-child(2){}
	.goods_set label:nth-child(2) input{width:145px; height:23px; display:block; outline:none; border:none; padding-left:5px;}
	.goods_set label:last-child{float:right; width:24px;}
	
	.goods_set_return{background:url(image/return_hover.png); width:21px; height:16px; margin-top:3px; cursor:pointer;}
	.goods_set_i{background:url(image/update_goods_hover.png); margin:7px 94px;}
	
	/*
	ul{padding:10px;}
	ul li{width:211px;height:309px;border: 1px solid rgba(204, 207, 208, 0.26);list-style-type:none; float:left;overflow:hidden;padding:4px; margin-left:20px;margin-top:20px;}
	ul li:hover{box-shadow: 0px 0px 10px -1px #adaba6;cursor:pointer;}
	ul li a{width:211px;height:30px;margin:4px auto;display:block; color: #fff; background:#f90;text-align:center; line-height:30px;cursor:pointer;border-radius:5px;}
	ul li a:hover{background:#ec8d00;}
	ul li .price{font-family: fantasy;color: red;font-size: 22px;line-height:12px;}
	ul li span{font-size: 14px;font-family: sans-serif;margin-left: 2px;}
	*/
  </style>
 </head>
 <body>
	<ul>
		<li>
			<div class="div_picture">
				<!---->
				<img src="E:/tako/tako1.jpg" alt='' width='211px' height='230px'/>
			</div>
			<div class="div_name">
				<!---->
				<span>好看的上衣</span>
			</div>
			<div class="div_price">
				<!---->
				<span>120元</span>
				
				
			</div>
			<div class="div_button">
				<!---->
				<a class='a_button' title='点击进行商品的修改'>
					<i class="goods_set_i"></i>
				</a>
				<label class="goods_set">
					<label></label>
					<label>
						<input type="text"/>
					</label>
					<label>
						<i class="goods_set_return"></i>
					</label>
				</label>
			</div>
		</li>
	</ul>
	<script src="js/MyjsV0-3.js"></script>
	<script>
	var ani1 = new AnimateRoutine({
		aniEle:$(".a_button")[0],
		type:"bottom",
		aniFlag:false,
		aniMax:30,
		addVal:0,
	}) ;
	var ani2 = new AnimateRoutine({
		aniEle:$(".goods_set")[0],
		type:"top",
		aniMax:88,
		addVal:-66,
	}) ;
	$(".a_button")[0].onclick = function(){
		ani1.run() ;
		setTimeout(function(){
			ani2.run() ;
		},200) ;
	}
	$(".goods_set_return")[0].onclick = function(){
		ani2.next() ;
		setTimeout(function(){
			ani1.next() ;
		},300) ;
	}

	</script>
 </body>
</html>